<template>
	<view class="navbar">
		<u-navbar :height="50" :border-bottom="false" :is-back="false" title="" :background="background"
			:is-fixed="false">
			<view class="avatar" @tap="avatarTap">
				<view style="padding-left: 20rpx;padding-right: 20rpx;border-radius: 10rpx;" class="ripple">
					<u-avatar size="40" :src="avatar"></u-avatar>
				</view>
				<u-search placeholder="日照香炉生紫烟" v-model="keyword" :show-action='false'> </u-search>
				<view style="padding-left: 20rpx;padding-right: 20rpx;">
					<u-badge size="mini" :offset="[15,20]" type="error" :count="notyCount"></u-badge>
					<u-icon size="40" :name="icon"></u-icon>
				</view>
			</view>
		</u-navbar>
	</view>
</template>

<script>
	export default {
		name: "cool-navbar",
		props: {
			avatar: {
				type: String,
				default: ''
			},
			notyCount:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d0d1dade-d4aa-4389-a86d-0459737eb16e/7665d3b0-59d1-4bf5-9697-4a4361fa5192.png',
				background: {
					
						backgroundColor: '#ffffff',

						// 导航栏背景图
						// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
						// 还可以设置背景图size属性
						// backgroundSize: 'cover',

						// 渐变色
						// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
					
				},
				keyword:''
			};
		},
		methods:{
			avatarTap(e){
				this.$emit('avatarTap',e)
			}
		},
		watch:{
			keyword(val){
				this.$emit('input',val)
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		.avatar {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: flex-end; //底部对齐

		}
	}
	.ripple {
	    position: relative;
	    //隐藏溢出的径向渐变背景
	    overflow: hidden;
	}
	 
	.ripple:after {
	    content: " ";
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 0;
	    left: 0;
	    pointer-events: none;
	    //设置径向渐变
	    background-image: radial-gradient(circle, #666 10%, transparent 10.01%);
	    background-repeat: no-repeat;
	    background-position: 50%;
	    transform: scale(10, 10);
	    opacity: 0;
	    transition: transform .3s, opacity .5s;
	}
	 
	.ripple:active:after {
	    transform: scale(0, 0);
	    opacity: .3;
	    //设置初始状态
	    transition: 0s;
	}
</style>
